<template>
    <view class="consume-red-packet">
     <!-- 创建消费红包 -->
     <view class="consume-red-packet-created" @click="createdRedPacket">
      <text class="consume-red-packet-created-icon iconfont icon-jia"></text>
      <text class="consume-red-packet-created-text">创建消费红包</text>
     </view>
     <!-- 红包效益 -->
     <view class="red-packet-benefit">
      <view class="red-packet-benefit-item" v-for="(item,index) in benefitArr" :key="index">
       <view class="red-packet-benefit-item-header">
        <text class="item-number">{{ item.number }}</text>
        <text class="item-unit">{{item.unit}}</text>
       </view>
       <!-- <view style="font-size: 34rpx;color: #000;">{{ item.number }}<text style="color: #999;margin-left: 8rpx;">个</text></view> -->
       <view class="red-packet-benefit-item-footer">
        <text>{{ item.name }}</text>
        <uni-icons @click="benefitFooterInfo(item)" type="info" size="14" color="#999"
         style="margin-left: 4rpx;"></uni-icons>
       </view>
      </view>
     </view>
     <!-- tab选项卡 -->
     <view>
      <!-- tab部分 -->
      <view class='tab-title'>
       <view 
        v-for="(item, index) in tabList" 
        :key="index" 
        :class="[currentIndex==index?'tabTrue':'']"
        :data-aa="index" @click='changeTab'>
        {{item}}
       </view>
       <view class='underline' :style="{'left':(left * 2)+'rpx','width': (width * 2)+'rpx'}"></view>
      </view>
      <!-- 内容信息 -->
      <swiper 
       class="swiper-content"
       :style="{'height':(winHeight * 2) + 'rpx'}"
       :current="currentIndex" 
       @change="tabChange" 
       @animationfinish="tabContentEnd"
      >
       <swiper-item class="swiper_item">
        <TabContent class="tab-content-item"/>
       </swiper-item>
       <swiper-item class="swiper_item">
        已结束区域
       </swiper-item>
       <swiper-item class="swiper_item">
        已领完区域
       </swiper-item>
      </swiper>
     </view>
     <view>
      <!-- 提示窗示例 -->
      <uni-popup ref="alertDialog" type="dialog">
       <uni-popup-dialog :type="msgType" confirmText="我知道了" :title="infoDialog.infoTitle"
        @confirm="infoDialogConfirm">
        <template v-slot:default>
         <view class="dialog-content">
          {{ infoDialog.infoContent }}
         </view>
        </template>
       </uni-popup-dialog>
      </uni-popup>
     </view>
    </view>
   </template>
   
   <script>
    import TabContent from './tabContent.vue'
    const benefitArr = [{
      number: 0,
      name: '已领取红包数',
      unit: '个',
      infoTitle: '已领取红包数',
      infoContent: '指所有顾客领取的红包个数之和'
     },
     {
      number: 0,
      name: '共带来新客',
      unit: '个',
      infoTitle: '共带来新客',
      infoContent: '指所有通过红包活动注册的客户数，来源包含新客红包和群红包'
     },
     {
      number: 0,
      name: '新增交易记录',
      unit: '笔',
      infoTitle: '新增交易记录',
      infoContent: '指所有使用了红包的交易笔数，包含线上支付和线下交易，退款订单不减少笔数'
     },
    ]
    export default {
     components: {
      TabContent
     },
     data() {
      return {
       benefitArr, // 红包效益列表
       infoDialog: {}, //对话框的信息
       tabCurIndex: 0, // tab当前的值
       tabList: ['发放中', '已结束', '已领完'],
       currentIndex: "0",
       left: '', // tab 下划线left值
       width: '' ,// tab 下划线宽度
       winHeight:"",//窗口高度
      };
     },
     onLoad() {
      this.changeline()
      this.getWinHeight()
      
     },
     methods: {
      // 创建消费红包
      createdRedPacket() {
   
      },
      // 点击信息图标弹出的信息框
      benefitFooterInfo(item) {
       this.infoDialog = item
       this.$refs.alertDialog.open()
      },
      // 点我知道了
      infoDialogConfirm() {
       this.$refs.alertDialog.close()
      },
      clickCtTab(ctCur) {
       this.tabCurIndex = ctCur
      },
      // 点击tab头部
      changeTab(e) {
       this.currentIndex = e.currentTarget.dataset.aa
       this.changeline()
       this.getWinHeight()
      },
      // tab 下面那条线
      async changeline() {
       const query = uni.createSelectorQuery()
       var _this = this
       query.select('.tabTrue').boundingClientRect()
       query.exec(await function(res) {
        console.log(res[0], 'res[0]');
        _this.left = res[0].left - (res[0].width / 2)
        console.log(typeof _this.left,'检测类型');
        _this.width = res[0].width
       })
      },
      //滑动切换swiper
      tabChange(e) {
       this.currentIndex = e.detail.current
       this.changeline()
      },
      // 动画结束
      tabContentEnd (e) {
       // console.log(e.detail, '结束了');
      },
      // 获取高度
      getWinHeight () {
       let _this = this
       let query = uni.createSelectorQuery()
       query.select('.tab-content-item').boundingClientRect( function (rect){
        _this.winHeight = rect.height
       }).exec()
      }
     },
    }
   </script>
   
   <style lang="scss" scoped>
    .consume-red-packet {
     box-sizing: border-box;
     width: 750rpx;
     min-height: 100vh;
     padding: 30rpx;
     background-color: #f5f5f5;
   
     // 创建拼团
     &-created {
      box-sizing: border-box;
      width: 100%;
      height: 180rpx;
      border-radius: 20rpx;
      background-color: #fff;
      padding: 30rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      color: $uni-primary;
      margin-bottom: 30rpx;
   
      &-icon {
       font-size: 56rpx;
       margin-bottom: 20rpx;
      }
   
      &-text {
       font-weight: bold;
      }
     }
   
     .red-packet-benefit {
      box-sizing: border-box;
      padding: 0 30rpx;
      width: 100%;
      height: 180rpx;
      border-radius: 20rpx;
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
   
      .red-packet-benefit-item {
       display: flex;
       flex-direction: column;
       align-items: center;
       color: #999;
   
       .red-packet-benefit-item-header {
        display: flex;
        align-items: center;
   
        .item-number {
         color: #000;
         font-weight: bold;
         margin-right: 6rpx;
        }
   
        .item-unit {
         font-size: 28rpx;
        }
       }
   
       .red-packet-benefit-item-footer {
        font-size: 24rpx;
        margin-top: 6rpx;
        display: flex;
        align-items: center;
       }
      }
     }
   
     .tab-title {
      display: flex;
      flex-direction: row;
      width: 100%;
      justify-content: space-around;
      position: relative;
      padding-bottom: 20rpx;
      margin: 30rpx 0;
      font-weight: bold;
      .tabTrue {
       color: $uni-primary;
      }
      .underline {
       background: $uni-primary;
       height: 6rpx;
       position: absolute;
       bottom: 0;
       border-radius: 6rpx;
       transition: all .25s linear;
      }
   
     }
     .swiper{
      min-height: 400rpx;
     }
     .dialog-content {
      color: #222;
      text-align: center;
      font-size: 26rpx;
      line-height: 40rpx;
     }
    }
   </style>
   <style scoped>
   
   </style>